<template>
	<view class="shoppingCart">
		<view class="home_nav" :style="{height:(statusBarHeight+45)+'px'}">
			<view class="action" @tap="operate()" :style="{marginTop:(statusBarHeight)+'px'}">
				<text v-if="cart.operate">完成</text>
				<text v-else>管理</text>
			</view>
			<view class="content" :style="{marginTop:(statusBarHeight)+'px'}">
				购物车
				<text class="text-sm">（共{{ cart.cartnum }}件宝贝）</text>
			</view>
		</view>
		<!-- 加入购物车 -->
		<block v-if="cart.list.length > 0">
			<view class="shoppingCart_items" :style="{marginTop:(statusBarHeight+55)+'px'}" v-for="(item,index) in cart.list" :key="index">
				<view class="shoppingCart_item" v-for="(goods, keys) in item.products" :key="keys">

					<view class="shoppingCart_item_left" v-if="goods.checked" @tap="choose({ index: index, keys: keys })">
						<image src="../../static/image/order/xuanzhong.png"></image>
					</view>
					<view class="shoppingCart_item_left" v-else @tap="choose({ index: index, keys: keys })">
						<image src="../../static/image/order/weixuanzhong.png"></image>
					</view>
					<view class="shoppingCart_item_center" @tap="onGoods(goods)">
						<image :src="$wanlshop.oss(goods.image, 100, 100 ,1)" mode="aspectFill"></image>
					</view>
					<view class="shoppingCart_item_right">
						<view class="name1" @tap="onGoods(goods)">{{ goods.title }}</view>
						<view class="name2">款式：{{ goods.sku.difference.join(" ")}}</view>
						<view class="name3">
							<view class="price" v-if="is_DC==0 || is_DC==1">￥{{ goods.sku.price }} <text>￥{{goods.sku.market_price}}</text></view>
							<view class="price" v-if="is_DC==2">￥{{ goods.sku.DCprice }} <text>￥{{goods.sku.market_price}}</text></view>
							<view class="num">
								<view class="wlIcon-jian" @tap="bcsub(goods)">-</view>
								<view class="wlIcon-number">{{goods.number}}</view>
								<view class="wlIcon-jia" @tap="bcadd(goods)">+</view>
								<!-- <uni-number-box class="number" :value="goods.number" :min="0" :max="100"></uni-number-box> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>		
		<view class="margin-bj" v-else>
			<block class=" padding-bj">
				<wanl-empty src="cart_default3x" text="哎呀，购物车空空如也！" />
				<!-- <wanl-product :dataList="likeData"/> -->
			</block>
		</view>
		<!-- 底部结算 -->
		<view class="shoppingCart_bottom"  v-if="cart.operate">
			<view class="shoppingCart_bottom_left"  @tap="toCartchoose()">
				<image v-if="cart.status" src="../../static/image/order/xuanzhong.png"></image>
				<image v-else src="../../static/image/order/weixuanzhong.png"></image>
				<text>{{ cart.status ? '取消' : '全选' }}</text>
			</view>
			<view class="shoppingCart_bottom_right">
				
				<view class="cu-btn" v-if="cart.allnum==0"  >移动关注</view>
				<view class="cu-btn isAciive" v-else @tap="move()">移动关注</view>
				<view class="cu-btn cu-btn2"  @tap="toEmpty()">快速清理</view>
				<view class="cu-btn cu-btn1" :class="{'isAciive1':cart.allnum != 0}" @tap="del()">删除</view>
			</view>
		</view>
		<view class="shoppingCart_bottom" v-else>
			<view class="shoppingCart_bottom_left"  @tap="toCartchoose()">
				<image v-if="cart.status" src="../../static/image/order/xuanzhong.png"></image>
				<image v-else src="../../static/image/order/weixuanzhong.png"></image>
				<text>{{ cart.status ? '取消' : '全选' }}</text>
			</view>
			<view class="shoppingCart_bottom_right">
				<view class="total">
					{{ cart.allnum }}项合计：
				</view>
				<view class="price">
					<view class="price_top">
						<text class="price1">￥</text>
						<text class="price2">{{ cart.allsum }}</text>
					</view>
					<view class="price_bottom">包装安装费</view>
				</view>
				<!-- <button v-if="cart.allnum == 0" class="cu-btn round line-gray">去结算</button>
				<button v-else class="cu-btn round bg-gradual-orange" @tap="settlement()">去结算 ({{ cart.allnum }})</button> -->
				<view class="settlement settlement1" v-if="cart.allnum == 0">去结算</view>
				<view class="settlement" v-else  @tap="settlement()">去结算({{ cart.allnum }})</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import wanlEmpty from '@/components/wanl-empty/wanl-empty.vue'
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
              // 导航栏高度
				statusBarHeight: 0,
				// 判断是否是ui设计师 0 是客户，1是设计室审核，2是设计师
				is_DC:''
			};
		},
		components: {
			wanlEmpty
		},
		computed: {
			...mapState(['cart', 'common'])
		},
		methods: {
			getPlaceOrder() {
				uni.navigateTo({
					url: '../placeOrder/placeOrder'
				})
			},
			...mapActions({
				operate: 'cart/operate', // 管理购物车
				choose: 'cart/choose', // 选择商品
				shopchoose: 'cart/shopchoose', // 选择店铺
				bcadd: 'cart/bcadd', // 添加数量
				bcsub: 'cart/bcsub',// 减少数量
				move: 'cart/move', // 移动购物车
				settlement: 'cart/settlement', // 结算购物车
				del: 'cart/del' // 删除选中购物车
			}),
			// 禁止空购物车点击全选
			toCartchoose(){
				if (this.$store.state.cart.list.length == 0) {
					uni.showModal({
					    content: '购物车没有任何宝贝，马上去选一个心仪的宝贝吧~',
					    success: res => {
					        if (res.confirm) {
								this.$wanlshop.on('/pages/product/category/category');
					        }
					    }
					});
				}else{
					this.$store.dispatch('cart/cartchoose');
				}
			},
			toEmpty(){
				uni.showModal({
				    content: '确定清空购物车？',
				    success: res => {
				        if (res.confirm) {
							this.$store.dispatch('cart/empty');
				        }
				    }
				});
			},
			// 计算系统屏幕的高度
			GetStatusBarHeight() {
				let that = this;
				uni.getSystemInfo({
					// 获取系统屏幕的高度
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight;
						console.log('状态栏高度', res)
					},
				});
			},
			// 点击商品的图片和标题跳转到商品详情
			onGoods(item){
				console.log('item',item)
			var obj={
					id:item.goods_id
				}
				uni.navigateTo({
					url:'../productDetails/productDetails?gress=' + encodeURIComponent(JSON.stringify(obj))
				})
			}
		},
		onLoad() {
			//调用系统屏幕尺寸函数
			this.GetStatusBarHeight();
			var cart = this.$store.state.cart
			console.log('cart', cart)
			var user = this.$store.state.user;
			this.is_DC=user.is_DC;
			console.log('user',user)
			console.log('is_DC',this.is_DC)
		}
	}
</script>

<style lang="scss">
	page {
		background: #f0f0f0;
	}

	.shoppingCart {
		.home_nav {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			// height: 150rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			z-index: 9999;
			display: flex;
			align-items: center;
			.action{
				// background-color: pink;
				width: 100rpx;
				text-align: center;
				color: 000000;
				font-size: 28rpx;
				text{
					// background-color: #4CD964;
				}
			}
			.content{
				font-size: 28rpx;
				// background-color: #3F536E;
				width: 600rpx;
				text-align: center;
				color: #000000;
				// width: ;
			}
		
			
		}
		.shoppingCart_items {
			
          margin-bottom: 150rpx;
		 
		  // background-color: pink;

			.shoppingCart_item {
				width: 700rpx;
				margin: 20rpx auto;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;

				&_left {
					// background-color: pink;
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {

						width: 30rpx;
						height: 30rpx;
					}
				}

				&_center {
					// background-color: red;
					width: 120rpx;
					height: 120rpx;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
					}
				}

				&_right {
					font-size: 24rpx;
					width: 480rpx;
					height: 120rpx;
					// background-color: green;
					margin-left: 20rpx;

					.name1 {
						color: #000000;
						//单行文本超出部分隐藏
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 7rpx;
					}

					.name2 {
						color: #888888;
					}

					.name3 {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							color: #000000;
							text{
								color:#888888 ;
								margin-left: 10rpx;
								text-decoration: line-through;
							}
						}

						.num {
							// background-color: pink;
							width: 170rpx;
							height: 50rpx;
							margin-right: 20rpx;
							display: flex;
							align-items: center;
							background-color:#e5e5e5 ;
							font-size: 26rpx;
							.wlIcon-jian{
								width: 60rpx;
								// background-color: pink;
								text-align: center;
								font-size: 33rpx;
							}
							.wlIcon-number{
								width: 60rpx;
								text-align: center;
								background-color: #FFFFFF;
								text-align: center;
								
							}
							.wlIcon-jia{
								width: 60rpx;
								// background-color: pink;
								font-size: 33rpx;
								text-align: center;
							}

						}
					}
				}
			}
		}

		.margin-bj {
			// background-color: pink;
			text-align: center;
			color: #808080;
		}

		&_bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100rpx;
			z-index: 99;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-top: 1px solid #f0f0f0;

			&_left {
				// background-color: pink;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #a5a5a5;
				}
			}

			&_right {
				display: flex;

				.total {
					font-size: 24rpx;
					color: #a5a5a5;
					// background-color: pink;
					padding-top: 6rpx;
				}

				.price {
					.price_top {
						.price1 {
							font-size: 26rpx;
							color: #ff0015;
							font-weight: 600;
						}

						.price2 {
							font-size: 32rpx;
							color: #ff0015;
							font-weight: 600;
						}
					}

					.price_bottom {
						text-align: right;
						// background-color: green;
						font-size: 24rpx;
						color: #a5a5a5;
					}
				}

				.settlement {
					width: 180rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					background-color: #ff0015;
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 50rpx;
					margin: 3rpx 20rpx 0;

				}
				.settlement1{
					color: #999999;
					border: 1px solid #999999;
					background-color: #FFFFFF;
				}
				// 管理操作
				.cu-btn{
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border: 1px solid #999999;
					font-size: 26rpx;
					color: #999999;
					border-radius: 50rpx;
					margin-right: 15rpx;
				}
				.cu-btn1{
					width: 120rpx;
				}
				.cu-btn2{
					border: 1px solid #ff0015;
					color: #ff0015;
				}
				.isAciive{
					border: 1px solid #ff0015;
					color: #ff0015;
				}
				.isAciive1{
					background-color: #ff0015;
					border: none;
					color: #FFFFFF;
				}
			}
		}

	}
</style>
